
<script setup>
import {data} from '../services/person.json' ;
import {ref,computed,onMounted,onUnmounted} from 'vue';
import { Icon,Search,Grid, GridItem  } from 'vant';
import {useRouter} from 'vue-router';
const router =useRouter();
const allList=ref(data)
const txt=ref('')
// 搜索
// const mayLsit=ref();
const mayLsit=computed(()=>{
  return allList.value.filter((i)=>i.title.includes(txt.value))
})
const fn=()=>{
  router.go(-1)
}
// // 划入划出
// const backTopFlag = ref(false)//用来判断样式
// const backTop = () => {
//   console.log(window.pageXOffset);
//       top.value = document.documentElement.scrollTop||document.body.scrollTop||window.pageXOffset     //获取点击时页面的滚动条纵坐标位置
//       console.log(top.value);
//       const timeTop = setInterval(() => {
//         document.documentElement.scrollTop = top -= 50//一次减50往上滑动
//         if (top <= 0) {
//           clearInterval(timeTop)
//         }
//       }, 5)//定时调用函数使其更顺滑
//     }
//     const handleScroll = () => {
//       // console.log(document.documentElement.scrollTop);
//       if (document.documentElement.scrollTop > 20) {
//         backTopFlag.value = true
//       } else {
//         backTopFlag.value = false
//       }
//       //往下滑超过20则显示 否则则不显示按钮
//     }
//     onMounted(() => {
//       window.addEventListener('scroll', handleScroll)
//     })//监听滚动事件
//     onUnmounted(() => {
//       window.removeEventListener('scroll', handleScroll)
//     }) //离开页面时移除监听事件
</script>
<template>
  <div class="news">
    <div class="ipt" id="top">
      <search 
          class="sea"
          v-model="txt"
          placeholder="请输入搜索关键词"
        >
        </search>
    </div>
    <div class="nav">
    <div v-for="i in mayLsit" class="acd">
      <img :src="i.img" alt="">
      <div class="cv">
        <a :href="i.vurl" class="txt" style="color:#000;">{{i.title}}</a>
        <div class="time">{{i.publish_time}}</div>
      </div>
    </div>
  </div>
  <!-- 回到顶部 -->
  <div class="footer">
    <li :class="backTopFlag ? 'active' : 'inactive'" @click="backTop">
        <i class="icon5"></i>
        <p>回到顶端</p>
  </li>
  </div>
  </div>
</template>
<style scoped lang="scss">
.news{
  background-color:#f5f5f9;
    position: relative;
  .footer{
        position: fixed;
        z-index: 9999;
        right: 10px;
        bottom: 100px;
        border-radius: 50%;
    width: 38px;
    height: 38px;
    background-color: white;
  .active {
  animation: active 1s;
  -webkit-animation: active 1s;
  overflow: hidden;
}
// @keyframes active {
//   0% {
//     height: 0px;
//   }
//   100% {
//     height: 60px;
//   }
// }
// // 消失
// .side .inactive {
//   animation: inactive 1s;
//   -webkit-animation: inactive 1s;
//   animation-fill-mode: forwards;
//   overflow: hidden;

// }

// @keyframes inactive {
//   0% {
//     height: 60px;
//   }

//   100% {
//     height: 0px;
//   }
// }

  }
position: relative;
  .nav{
    margin-top: 60px;

    .acd{
      margin-top: 20px;
      display: flex;
      img{
      display: block;
      width: 100px;
      height: 100px;
    }
    .cv{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      margin-left: 10px;
      flex: 1;
      background-color: white;
    }
    }


  }
  .ipt{
    width: 100%;
    position: fixed ;
        top: 0 ; 
        z-index: 999;
    justify-content: space-around;
    background-color: white;
    position: fixed;
        top: 0 ; 
        z-index: 999;
  }

}
</style>
